import useUrlState from '@ahooksjs/use-url-state';
import { css } from '@emotion/react';
import { Tabs, TabsProps } from 'antd';
import {
  ArticleNormalCategory,
  articleNormalCategory,
  EvaluationCategory,
} from 'common/utils/data';
import EvaluationArticleList from './EvaluationArticleList';
import NormalArticleList from './NormalArticleList';
import EqList from './EqList';
import TabBarWrapper from './TabBarWrapper';

export default function TabList({
  prefixTabList,
}: {
  prefixTabList: Exclude<TabsProps['items'], undefined>;
}) {
  const [state, setState] = useUrlState<{
    tab: string;
    keyword?: string;
  }>({
    tab: prefixTabList[0].key,
  });

  return (
    <div
      className="center-container mt-[16px]"
      css={css`
        .ant-tabs-nav::before {
          display: none;
        }
        .ant-tabs-nav-list {
          width: 100%;
          justify-content: space-between;
          gap: 16px;
        }
        .ant-tabs-tab {
          width: 100% !important;
          border-radius: 8px !important;
          display: flex;
          justify-content: center;
          &.ant-tabs-tab-active {
            border: solid 1px var(--primary-color) !important;
          }
          &:not(.ant-tabs-tab-active) {
            background-color: #fff !important;
          }
        }
      `}
    >
      <Tabs
        type="card"
        activeKey={state.tab}
        onChange={(key) => {
          setState((origin) => {
            return {
              ...origin,
              tab: key,
            };
          });
        }}
        items={[
          ...(prefixTabList || []),
          {
            label: '随身耳机',
            key: 'earbuds',
            children: (
              <EvaluationArticleList
                keyword={state?.keyword}
                category={EvaluationCategory.EARBUDS}
                defaultSpecifications={[
                  {
                    specificationUuid: '495f4f84-8294-4710-8e43-607cfaf10fa0',
                    value: ['IN_EAR', 'HALF_IN_EAR', 'EARBUD', 'BLUETOOTH'],
                  },
                ]}
              />
            ),
          },
          {
            label: '头戴式耳机',
            key: 'headphones',
            children: (
              <EvaluationArticleList
                keyword={state?.keyword}
                category={EvaluationCategory.EARBUDS}
                hideSpecificationNames={['佩戴方式']}
                defaultSpecifications={[
                  {
                    specificationUuid: '495f4f84-8294-4710-8e43-607cfaf10fa0',
                    value: ['HEADPHONES'],
                  },
                ]}
              />
            ),
          },
          {
            label: '小尾巴&播放器',
            key: 'dongle_player',
            children: (
              <EvaluationArticleList
                keyword={state?.keyword}
                category={EvaluationCategory.SOUND_SOURCE}
                defaultSpecifications={[
                  {
                    specificationUuid: '5a78ccfe-7a15-4efd-b5ce-0a7f2952e0a6',
                    value: [
                      'PORTABLE_DECODE_EAR_AMPLIFIER',
                      'PORTABLE_PLAYER',
                      'CD_PLAYER',
                      'PORTABLE_EAR_AMPLIFIER',
                    ],
                  },
                ]}
              />
            ),
          },
          {
            label: '桌面音源',
            key: 'desk',
            children: (
              <EvaluationArticleList
                keyword={state?.keyword}
                category={EvaluationCategory.SOUND_SOURCE}
                defaultSpecifications={[
                  {
                    specificationUuid: '5a78ccfe-7a15-4efd-b5ce-0a7f2952e0a6',
                    value: [
                      'DESKTOP_PLAYER',
                      'CD_PLAYER',
                      'DESKTOP_DECODE_EAR_AMPLIFIER',
                      'DESKTOP_DECODER',
                      'DESKTOP_EAR_AMPLIFIER',
                    ],
                  },
                ]}
              />
            ),
          },
          {
            label: '发烧系统',
            key: 'hifi',
            children: (
              <EvaluationArticleList
                keyword={state?.keyword}
                category={EvaluationCategory.EARBUDS}
                hideSpecificationNames={['发烧系统']}
                defaultSpecifications={[
                  {
                    specificationUuid: '9d583fa6-4f29-49cb-b5bc-ff2eb8c8e757',
                    value: ['true'],
                  },
                ]}
              />
            ),
          },
          {
            label: '调音分享中心',
            key: 'mixer',
            children: (
              <EqList
                keyword={state?.keyword}
              />
            ),
          },
          ...articleNormalCategory.$listSelect
            .filter((item) => item.value === ArticleNormalCategory.HIFI_DISCUSS)
            .map((item) => {
              return {
                label: item.label,
                key: item.value,
                children: (
                  <NormalArticleList
                    keyword={state?.keyword}
                    category={item.value}
                  />
                ),
              };
            }),
        ]}
        renderTabBar={(props, DefaultTabBar) => {
          return (
            <TabBarWrapper>
              <DefaultTabBar {...props} />
            </TabBarWrapper>
          );
        }}
      />
    </div>
  );
}
